نحوه مخفی کردن نوار اسکرول در CSS

اگر می‌خواهید یک وب‌سایت دقیقا آن‌طور که می‌خواهید طراحی شود، باید موارد اضافی را از آن حذف کنید. این موارد اضافی شامل مقدار فضاهای خالی یا در اینجا نوار اسکرول می‌شوند.

چه برای طراحی سایت چه عملکرد بهتر سایت این کار را انجام می‌دهید، پنهان کردن نوار اسکرول در یک صفحه با CSS بسیار آسان است. معمولا راه‌های متعددی برای انجام این کار وجود دارند که شامل موارد زیر می‌شوند:

• ·        پنهان کردن نوار اسکرول با اجازه اسکرول کردن
• ·        پنهان کردن نوار اسکرول و غیرفعال کردن پیمایش
• ·        پنهان نگه داشتن نوار اسکرول فقط تا زمانی که نیاز باشد

شما هر کدام را که بخواهید بر اساس نیازتان انتخاب می‌کنید. برای رفع نیازهای طراحی شما، همه روش‌ها را در این مقاله توضیح داده‌ایم.

نحوه مخفی کردن نوار اسکرول در  CSS (اما با اجازه اسکرول کردن)

متاسفانه هیچ قانون خاصی در CSS وجود ندارد که بتواند نوار اسکرول را پنهان کرده و در عین حال توانایی اسکرول کردن صفحه یا عنصر را به پایین حفظ کند. با این حال، چنین چیزی با چند قانون CSS خاص مرورگر امکان‌پذیر است. برای پنهان کردن نوار اسکرول و حفظ عملکرد آن، CSS  زیر را روی بدنه (برای کل صفحه) یا یک عنصر خاص اعمال کنید.

CSS

/* hide scrollbar but allow scrolling */

element {

  -ms-overflow-style: none; /* for Internet Explorer, Edge */

  scrollbar-width: none; /* for Firefox */

  overflow-y: scroll;

}

element::-webkit-scrollbar {

  display: none; /* for Chrome, Safari, and Opera */

}

کپی کنید

... که در آن عنصر انتخاب‌کننده‌ای است که می‌خواهید هدف قرار دهید. این کد زمانی که در کل صفحه اعمال شود، مشخص می‌شود. در اینجا همان کد اعمال‌شده برای عنصر<div>  است.

معمولا در هر دو مورد، یک نوار پیمایش ظاهر می‌شود. با این حال، قوانین ما از این اتفاق در مرورگرهای وب محبوب جلوگیری می‌کند.

نحوه مخفی کردن نوار اسکرول در  CSSو غیرفعال کردن پیمایش

برای پنهان کردن نوار اسکرول و غیرفعال کردن همزمان آن، می‌توانید از ویژگی سرریز CSS استفاده کنید. این ویژگی تعیین می‌کند با محتوایی که فراتر از مرزهای ظرفیت آن است، چه باید کرد.

برای جلوگیری از پیمایش با این ویژگی، فقط قانون سرریز را اعمال کنید: پنهان در بدنه (برای کل صفحه) یا یک عنصر کانتینر. این قانون تمام محتوا را فراتر از مرز عنصر پنهان می‌کند. روش دیگر، استفاده از سرریز و به طور قابل مشاهده برای نشان دادن محتوایی است که فراتر از مرزهای کانتینر قرار دارد.

با این کار، اسکرول عمودی و افقی غیرفعال می‌شوند. در ادامه خواهید دید که می‌توان فقط اسکرول افقی یا عمودی را غیرفعال کرد.

نحوه مخفی کردن نوار اسکرول عمودی در  CSS

برای پنهان کردن نوار اسکرول عمودی و جلوگیری از پیمایش عمودی، از overflow-y: hidden  استفاده کنید.

نحوه مخفی کردن نوار اسکرول افقی در  CSS

به طور کلی، اسکرول افقی ایده چندان خوبی نیست. برای پنهان کردن نوار اسکرول افقی و جلوگیری از اسکرول آن، از overflow-x: hidden  استفاده کنید.

بیشتر بخوانید: نحوه ایجاد اسلایدر محدود در CSS

نحوه پنهان کردن نوار اسکرول تا زمانی که نیاز باشد

در برخی موارد، پنهان کردن نوار اسکرول به طراحی شما کمک می‌کند. با این حال، مواردی نیز وجود دارند که حذف این قسمت از صفحه به تجربه کاربر آسیب رسانده است. چرا که بیشتر بازدیدکنندگان، فعالیت پیمایش را با یک نوار پیمایش قابل‌مشاهده مرتبط می‌دانند. بنابراین، ممکن است برای برخی عجیب به نظر برسد که این روش برای کل صفحه اعمال شود.

نوارهای پیمایش برای ما مشخص می‌کنند که چه مقدار از صفحه برای مشاهده باقی مانده است (مگر اینکه اسکرول بی‌نهایت اجرا شود). در صورتی که نشانگر بصری دیگری داشته باشید که نشان دهد محتوای بیشتری برای مشاهده باقی مانده است، نبود نوار اسکرول ناامیدکننده خواهد بود.

آزمایش کاربر مشخص می‌کند که چگونه یک نوار اسکرول پنهان‌شده، روی تجربه کاربری سایت شما تاثیر می‌گذارد. با این حال، یک مصالحه خوب در بسیاری از موارد، پنهان کردن نوار اسکرول تا زمانی است که کاربر پیمایش را آغاز کند. برای فعال کردن آن در  CSS، از قانون سرریز خودکار استفاده کنید.

نوار اسکرول را با CSS مخفی کنید

چه در حال ساخت یک صفحه با CSS خالص یا یک فریم‌ورک باشید، تنها چند قانون نیاز است تا نوار اسکرول را از صفحه خود مخفی کنید.

با اینکه امکان پنهان کردن نوار اسکرول وجود دارد، اما این بدان معنا نیست که حتما باید این کار را انجام دهید. نوار اسکرول برای بسیاری از کاربران یک نشانه بصری مفید است که از ناوبری پشتیبانی می‌کند. اگر قصد حذف آن را دارید، حتما این کار را به گونه ای انجام دهید که به طراحی سایت شما کمک کند.  

• 62
• 0